<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="我的收藏"/>
    <div class="list-box">
        <div v-if="like.list.length != 0">
            <ul>
                <li v-for="item in like.list" :key="item.id">
                    <router-link :to="{
                        path: '/detail',
                        query: {
                            article_id: item.article_id,
                            article_type: item.article_type
                        }
                    }">
                        {{ item.article_title }}
                    </router-link>
                </li>
            </ul>
        </div>
        <div v-else>
            <van-empty description="没有收藏内容" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getLikeList } from '../api/index'
let like: any = reactive({ list: [] })
const $router = useRouter()
const onClickLeft = () => {
    $router.back();
}

// 初始化
const initFn = async ()=> {
    await getLikeList().then(
        content=>{
            console.log('1.0',content)
            if(content.code == 200){
                // 赋值 (数据改变,更新视图)
                like.list = content.result;
            }
        }
    )
}

initFn();

</script>
<style lang="less" >
:root {
    --van-nav-bar-icon-color: #000;
    --van-font-bold: normal;
}
.list-box {
    // margin-top: .2667rem;
    padding: 0 .4rem;
    ul {
        li {
            a {
                display: block;
                width: 100%;
                padding: .2667rem 0;
                border-block-end: 1px dashed #ccc;
                color: #666;
            }
        }
    }
}
</style>